<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<%
 String path = request.getContextPath();
 String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
 //JSON.stringify
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="<%=path%>/source/CSS/layui.css" media="all">
  <link rel="stylesheet" type="text/css" href="https://cdn.bootcss.com/bootstrap/4.0.0-beta.2/css/bootstrap.min.css">
</head>
<script type="text/javascript" src="https://cdn.bootcss.com/jquery/1.4.0/jquery.js"></script>
<script src="https://ajax.aspnetcdn.com/ajax/jquery/jquery-1.11.1.min.js"></script>
<script src="<%=path%>/source/JS/layui.js"></script>

<script>

	$(document).ready(function(){
		
		$('#userTbody').on('click', ".myClz", function () {
			$(this).closest('tr').remove();
	        var col = $(this).parent().parent().find('td');
			var id = col.eq(0).text();
		    window.location.href='DoDao?type=NewsDel&id='+id;
		});
		$('#userTbody').on('click', ".modify", function () {
			var col = $(this).parent().parent().find('td');
			var id = col.eq(0).text();
		    window.location.href='PageDao?action=NewsUp&id='+id;
		});
		
		$("#btn_submit").click(function () {
		    // 获取用户输入的值
		    var id = $("#id").val();
		    var author = $("#author").val();
		    var title = $("#title").val();
		    var content = $("#content").val();
		    var date = $("#date").val();
		    var tr = "<tr><td class='id'>" + id + "</td><td class='author'>" + author
		      + "</td><td class='title'>" + title + "</td><td class='content'>" + content + "</td><td class='date'>" + date
		      + "</td><td><button class='modify'>修改</button><button href='#' class='myClz'>删除</button></td></tr>";
		    $("#userTbody").append(tr);
		  });

		
		
	    $.ajax({
	        url:"NewsServlet",
	        type:"POST",
	        dataType:"JSON",
	        data:{},
	        contentType:"application/json;charset=utf-8",
	        success:function(data){
	            for(i in data.data) //data.data指的是数组，数组里是8个对象，i为数组的索引
	            {
	                var tr;
	                tr='<td>'+data.data[i].id+'</td>'+'<td>'+data.data[i].author+'</td>'+'<td>'+data.data[i].title+'</td>'+'<td>'+data.data[i].content+'</td>'+'<td>'+data.data[i].date+'</td>'+
	                "<td><button class='modify layui-btn layui-btn-warm'>修改</button><button class='myClz layui-btn layui-btn-danger'>删除</button></td>"
	                $("#tabletest").append('<tr align="center">'+tr+'</tr>')
	            }
	       	},    
	   });
	    
	});

</script>

<body>

	<div style="padding: 20px; background-color: #F2F2F2; padding-left:15%;">
      <div class="layui-row layui-col-space15">
        <div class="layui-col-md8">
          <div class="layui-card">
            <div class="layui-card-body">
        	<center>
				<form name="userForm" action="<%=request.getContextPath() %>/servlet/DoDao?type=NewsAdd" method="post">
				    <center>
				      <h1><b>公司资讯</b></h1>
				      <br />
					<div class="layui-form-item">
		        	  	<label class="layui-form-label">ID:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="id" type="text" name="id" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
			        	<label class="layui-form-label">作者:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="author" type="text" name="author" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					    <label class="layui-form-label">标题:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="title" type="text" name="title" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					 </div>
					 <div class="layui-form-item">
					  	<label class="layui-form-label">内容:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="content" type="text" name="content" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>

 						<label class="layui-form-label">日期:</label>
					    <div class="layui-input-inline" align="center">
				      		<input id="date" type="text" name="date" required  lay-verify="required"  autocomplete="off" class="layui-input">
					  	</div>
					  	<input type="submit" value="添加" id="btn_submit" style="margin-left:10px" class="layui-btn"/>
					  </div>
				    </center>
			    </form>
				
				
				
				<table class="layui-table" id='tabletest'>
					 <thead>
					 	<tr bgcolor="CCCCCC" align="center">
					        <td>id</td>
					        <td>作者</td>
					        <td>标题</td>
					        <td>内容</td>
					        <td>时间</td>
					        <td>操作</td>
					    </tr>
				    </thead>
			        <tbody id="userTbody">
				      <tr align="center">
				        <td>000</td>
				        <td>刘欣宇</td>
				        <td>红酒</td>
				        <td>RedWine红酒促销信息</td>
				        <td>今天</td>
				        <td>
						  <button class="layui-btn layui-btn-warm">修改</button>
				          <button class="layui-btn layui-btn-danger">删除</button>
				        </td>
				      </tr>
    				</tbody>
			 	</table>
				 
			</center>
            </div>
          </div>
        </div>
      </div>
    </div>
    
</body>
</html>